<!-- 运行时长趋势图 -->

<template>
  <div class="running-time-trend">
    <div class="chart-title">
      <i class="el-icon-time"></i>
      <span>运行时长趋势</span>
    </div>
    <div ref="trendChart" class="trend-chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'RunningTimeTrend',
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      // 监听窗口大小变化，自适应调整图表
      window.addEventListener('resize', this.handleResize)
    })
  },
  beforeDestroy() {
    // 组件销毁前清理图表实例和事件监听
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.trendChart)

      const option = {
        grid: {
          left: '3%',
      
          top: '12%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            return `${params[0].name}<br/>运行时长: ${params[0].value} 小时`
          }
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLine: { lineStyle: { color: '#999' } },
          axisLabel: { 
            color: '#666',
            rotate: 0,
            interval: 0,
            fontSize: 11
          }
        },
        yAxis: {
          type: 'value',
          name: '小时',
          nameTextStyle: {
            color: '#666',
            padding: [0, 0, 0, 10],
            fontSize: 12
          },
          axisLine: { show: false },
          axisLabel: { 
            color: '#666',
            formatter: '{value}',
            fontSize: 11
          },
          splitLine: { 
            lineStyle: { 
              color: 'rgba(0,0,0,0.1)',
              type: 'dashed'
            } 
          }
        },
        series: [
          {
            name: '运行时长',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              width: 3,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#3498db' },
                { offset: 0.5, color: '#5dade2' },
                { offset: 1, color: '#85c1e9' }
              ])
            },
            itemStyle: {
              color: '#3498db',
              borderWidth: 2
            },
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(52, 152, 219, 0.6)' },
                { offset: 0.5, color: 'rgba(93, 173, 226, 0.3)' },
                { offset: 1, color: 'rgba(133, 193, 233, 0)' }
              ])
            },
            data: [120, 135, 128, 145, 150, 165, 158, 170, 175, 180, 185, 190] // 示例数据，单位：小时
          }
        ]
      }

      this.chart.setOption(option)
    },

    handleResize() {
      // 窗口大小改变时重新调整图表大小
      if (this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>

<style scoped>
.running-time-trend {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-title {
  font-size: 13px;
  color: #333;
  font-weight: 500;
  padding: 8px 0 10px 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-left: 12px;
}

.chart-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-radius: 2px;
}

.chart-title i {
  font-size: 14px;
  color: #3498db;
}

.chart-title span {
  flex: 1;
}

.trend-chart {
  width: 100%;
  flex: 1;
  min-height: 0;
}
</style>

